import React, { Component } from "react";

interface IProps {
  readonly name?: string;
}
interface IState {
  color: string;
  sex: "boy" | "girl"; //指定具体的值的联合类型
}
export default class Home extends Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      color: "red",
      sex: "boy",
    };
  }
  // state: IState = {
  //   color: "red",
  //     sex: 'boy'
  // }
  changeColor = () => {
    this.setState({
      color: "green",
    });
  };
  render() {
    const { color, sex } = this.state;
    const { name } = this.props;
    return (
      <div>
        <p style={{ color }}>
          {sex}+{name ? name : "Ts-React"}
        </p>
        <button onClick={this.changeColor}>change-color</button>
      </div>
    );
  }
}
